<template>
  <a :href="top_advertiser.website"
    :data-handle="top_advertiser.handle"
    :data-advertisement_id="top_advertiser.advertisement_id ? top_advertiser.advertisement_id : ''"
    data-page_position="Sponsored"
    rel="dofollow"
    target="_blank"
    class="top_advertiser relative flex items-center px-3 py-3 gap-4 border border-purple-1300 rounded-md group overflow-hidden flex-shrink-0 tool-dom"
    @click="handleExp"
    v-if="hasRealVal(top_advertiser) && hasRealVal(top_advertiser.website)">
    <div class="flex top_advertiser-pic items-center justify-center skeleton-bg flex-shrink-0"
      ref="imgBox">
      <common-image class="w-full h-full flex-shrink-0"
        :src="top_advertiser.image ? $vResetPic(top_advertiser.image, 200) : 'https://cdn.toolify.ai/default.webp'"
        :alt="toolName"
        :lazyLoad="false"></common-image>
    </div>
    <div class="flex-1 w-0">
      <div class="text-base font-semibold text-gray-1000 truncate break-words group-hover:text-purple-1300 pr-24">{{toolName}}</div>
      <p class="mt-1 text-sm text-gray-1000 break-words line-2"
        v-if="hasRealVal(top_advertiser.description)">{{top_advertiser.description}}</p>
    </div>
    <div class="absolute top-0 right-0 py-1 px-3 text-white text-sm rounded-bl-md bg-purple-1300">{{$t('detail_featured')}}</div>
  </a>
</template>

<script>
import mixinsExposure from '~/mixins/mixins-exposure'
import _ from 'lodash'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'ToolDetailRecommend',
  mixins: [mixinsExposure],
  computed: {
    ...mapState({
      top_advertiser: (state) => state.top_advertiser,
    }),
    toolName() {
      return this.$websiteName(this.top_advertiser)
    },
  },
  created() {},
  methods: {
    ...mapActions(['exposure']),
    handleExp: _.throttle(function () {
      let exporeData = this.getExporeData(
        this.top_advertiser,
        null,
        null,
        false,
        {
          target_url: this.top_advertiser.website,
          page_position: 'Sponsored',
        }
      )
      this.exposure({
        ...exporeData,
      })
    }, 2000),
  },
}
</script>
<style lang='scss' scoped>
.top_advertiser {
  width: 100%;
  .top_advertiser-pic {
    width: 120px;
    height: 68px;
  }
}
@media (min-width: 1024px) {
  .top_advertiser {
    max-width: 100%;
    width: 400px;
  }
}
</style>